<template>
  <view class="empty-login">
    <image class="empty-image" src="/static/images/empty-state.png" mode="aspectFit" />
    <text class="empty-title">{{ title }}</text>
    <text class="empty-desc">{{ desc }}</text>
    <view class="login-btn" @click="goToLogin">
      <text class="login-btn-text">{{ buttonText }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'EmptyLogin',
  props: {
    // 标题
    title: {
      type: String,
      default: '暂无内容'
    },
    // 描述
    desc: {
      type: String,
      default: '登录后查看更多精彩内容'
    },
    // 按钮文字
    buttonText: {
      type: String,
      default: '立即登录'
    }
  },
  methods: {
    goToLogin() {
      uni.navigateTo({
        url: '/subPages/auth/login'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.empty-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 40rpx 60rpx;
}

.empty-image {
  width: 280rpx;
  height: 220rpx;
  margin-bottom: 32rpx;
}

.empty-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 12rpx;
}

.empty-desc {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 40rpx;
}

.login-btn {
  width: 360rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #06CBB6 0%, #00d4aa 100%);
  border-radius: 40rpx;
  box-shadow: 0 6rpx 20rpx rgba(6, 203, 182, 0.3);
}

.login-btn-text {
  font-size: 30rpx;
  font-weight: 600;
  color: #fff;
}
</style>
